<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>捕获事件捕获</title>
    <style>
        .box1 {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .box2 {
            position: absolute;
            top: 50%;
            margin-top: -100px;
            left: 50%;
            margin-left: -100px;
            width: 200px;
            height: 200px;
            border: 10px black;
            background-color: yellow;
        }
        .box3 {
            position: absolute;
            top: 50%;
            margin-top: -50px;
            left: 50%;
            margin-left: -50px;
            width: 100px;
            height: 100px;
            border: 1px black;
            background-color: green;
        }
        p {
            font-size: 24px;
            margin-left: 6px;
            margin-top: 6px;
        }
    </style>
</head>
<body>
    <div class='box1'>
        <p>box1</p>
        <div class='box2'>
            <p>box2</p>
            <div class='box3'>
                <p>box3</p>
            </div>
        </div>
    </div>

    <script>
        let oBox1 = document.getElementsByClassName('box1')[0];
        let oBox2 = document.getElementsByClassName('box2')[0];
        let oBox3 = document.getElementsByClassName('box3')[0];

        oBox1.addEventListener('click', function () {
            console.log('点击了盒子 1');
        }, true);
        oBox2.addEventListener('click', function () {
            console.log('点击了盒子 2');
        }, true);
        oBox3.addEventListener('click', function () {
            console.log('点击了盒子 3，冒泡阶段');
        }, false);
        oBox3.addEventListener('click', function () {
            console.log('点击了盒子 3，冒泡阶段 2');
        }, false);
        oBox3.addEventListener('click', function () {
            console.log('点击了盒子 3，捕获阶段');
        }, true);
    </script>
</body>
</html>
